<template>
  <div class="shop-content">
    <el-header height="207px">
      <el-row>
        <el-col :lg="2" :md="2" :sm="24" :xl="2" :xs="24"><div style="color: transparent">占位符</div></el-col>
        <el-col :lg="20" :md="20" :sm="24" :xl="20" :xs="24">
          <div class="page-top">
            <el-image class="icon-back" :src="icon_back" @click="goback"></el-image>
            <div class="txt-back" @click="goback">返回</div> <!--$router.back()-->
            <span class="txt-line">|</span>
            <span class="txt"><el-image class="icon-shop" :src="icon_shop"></el-image>积分商城</span>
          </div>
        </el-col>
        <el-col :lg="2" :md="2" :sm="24" :xl="2" :xs="24"><div style="color: transparent">占位符</div></el-col>
      </el-row>
    </el-header>
    <div class="page-box">
      <div class="page-box-l">
        <div class="page-box-l-l">
          <el-image class="box-l-img" :src="objdata.img"></el-image>
        </div>
        <div class="box-l-txt">
          <div class="title">{{objdata.title}}</div>
          <div class="txt">{{objdata.txt}}</div>
        </div>
      </div>
      <el-image class="page-box-r" :src="objdata.ewm"></el-image>
    </div>

  </div>
</template>
<script>
export default {
  name: "interact",
  data() {
    return {
      icon_back: require('@/assets/login_images/icon-return.png'),
      icon_shop: require('@/assets/login_images/icon-sc.png'),
      objdata:{
        img: require('@/assets/login_images/img4.png'),
        ewm: require('@/assets/login_images/ewm2.png'),
        title:'互动模块名称',
        txt:'功能升级中...'
      }
    }
  },
  created() {

  },
  methods:{
    goback(){
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>

.page-box{
  width: 1400px;
  height: calc(100vh - 207px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .page-box-l{
    display: flex;
    align-items: center;
    height: 100%;
    .page-box-l-l{
      display: flex;
      align-items: flex-end;
      width: 395px;
      height: 100%;
      margin-right: 100px;
      .box-l-img{
        width: 395px;
        height: 678px;
      }
    }

    .box-l-txt{
      display: flex;
      flex-direction: column;
      width: 500px;
      .title{
        font-size: 36px;
        font-weight: bold;
        line-height: 61px;
        color: #333333;
        margin-bottom: 20px;
      }
      .txt{
        font-size: 22px;
        font-weight: 400;
        line-height: 42px;
        color: #999999;
      }

    }
  }
  .page-box-r{
    width: 300px;
    height: 300px;
  }
}


.shop-content {
  height: 100vh;
  background: url('~@/assets/login_images/bg_hdmk.jpg') center center fixed no-repeat;
  background-size: cover;
}
.page-top{
  display: flex;
  align-items: center;
  margin-top: 50px;
  .icon-back{
    cursor: pointer;
    width: 16px;
    height: 14px;
    margin-right: 10px;
  }
  .txt-back{
    cursor: pointer;
    font-size: 24px;
    font-weight: 400;
    line-height: 41px;
    color: #000000;
  }
  .txt-line{
    color: #ddd;
    font-size: 24px;
    font-weight: 400;
    line-height: 41px;
    margin: 0 15px;
  }
  .txt{
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 34px;
    color: #999;
    .icon-shop{
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
  }
}
</style>
